import clsx from "clsx"
import { Outlet, useLocation, useNavigate } from "react-router-dom"

const steps = [
  { id: 1, label: "Analyze", path: "analyze" },
  { id: 2, label: "Process", path: "process" },
  { id: 3, label: "Complete", path: "complete" },
]

const ChatSteps = () => {
  const navigate = useNavigate()
  const location = useLocation()

  const currentStep =
    steps.findIndex(({ path }) => location.pathname.endsWith(path)) + 1

  return (
    <div
      className="flex flex-col h-full p-8 bg-white border-l border-gray-200 shadow-lg"
      style={{ minWidth: 320 }}
    >
      <h2 className="text-3xl font-extrabold mb-8 text-gray-900 select-none tracking-wide">
        Steps
      </h2>

      <nav
        aria-label="Steps navigation"
        className="flex flex-col space-y-5 mb-8 overflow-y-auto"
        style={{ flexGrow: 0 }}
      >
        {steps.map(({ id, label, path }) => (
          <button
            key={id}
            onClick={() => navigate(path, { relative: "path" })}
            className={clsx(
              "flex items-center gap-5 text-left rounded-lg p-4 cursor-pointer transition-shadow duration-200",
              currentStep === id
                ? "bg-blue-600 text-white shadow-lg ring-2 ring-blue-400"
                : "bg-gray-100 text-gray-700 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-300"
            )}
            aria-current={currentStep === id ? "step" : undefined}
          >
            <span
              className={clsx(
                "flex items-center justify-center w-9 h-9 rounded-full font-semibold text-lg flex-shrink-0 select-none",
                currentStep === id
                  ? "bg-white text-blue-600"
                  : "bg-blue-300 text-blue-800"
              )}
            >
              {id}
            </span>
            <span className="font-semibold text-lg">{label}</span>
          </button>
        ))}
      </nav>

      <section
        className="flex-1 overflow-auto p-6 border border-gray-200 rounded-lg bg-gray-50 text-gray-900 shadow-inner"
        style={{ minHeight: 300 }}
      >
        <Outlet />
      </section>
    </div>
  )
}

export default ChatSteps
